@font-face{
        font-family: 'Modern Pictograms';
        src:url('modernpics.otf') format('otf');
        font-weight: normal;
        font-size: normal;
    }
    *{padding: 0;margin:0;}
    body{
        background-color: #fff;
        color:#555;
        font-family: 'Avenir Next','Lantinghei SC';
        font-size:14px;
        font-weight: bold;
    }
    #wrap{
        width: 100%;
        height: 600px;
        position: absolute;
        top: 50%;
        margin-top: -300px;
        overflow: hidden;
        -webkit-perspective:800px;
        -moz-perspective:800px;
    }
    .photo{
        width: 260px;
        height: 320px;
        position: absolute;
        z-index: 1;
        box-shadow: 0 0 1px rgba(0,0,0,.01);
        -webkit-transition:all 0.6s;
        -moz-transition:all 0.6s;
        left: 50%;
        top: 50%;
        margin:-160px 0 0 -130px;
    }
    .photo .side{
        width: 100%;
        height: 100%;
        background-color: #eee;
        position: absolute;
        top: 0;
        right: 0;
        padding: 20px;
        box-sizing: border-box;
    }
    .photo .side-front .image{
        width: 100%;
        height: 250px;
        line-height: 250px;
        overflow: hidden;
    }
    .photo .side-front .image img{
        width: 100%;
    }
    .photo .side-front .caption{
        text-align: center;
        font-size: 16px;
        line-height: 50px;

    }
    .photo .side-back{
        overflow: hidden;
    }
    .photo .side-back .desc{
        color: #666;
        font-size: 14px;
        line-height: 1.5em;

    }
    .photo-center{
        left: 50%;
        top: 50%;
        margin:-160px 0 0 -130px;
        z-index: 999;
    }
    .photo-wrap{
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform-style:preserve-3d;
        -webkit-transition:all 0.6s;
        -webkit-transform-origin:0% 50%;
        -moz-transform-style:preserve-3d;
        -moz-transition:all 0.6s;
        -moz-transform-origin:0% 50%;
    }
    .photo-wrap .side-front{
        -webkit-transform:translate(0px , 0px) rotateY(0deg);
        -moz-transform:translate(0px , 0px) rotateY(0deg);
    }
    .photo-wrap .side-back{
        -webkit-transform:rotateY(180deg);
        -moz-transform:rotateY(180deg);
    }
    .photo-wrap .side{
        -webkit-backface-visibility:hidden;
        -moz-backface-visibility:hidden;
   }
    .photo-front .photo-wrap{
        -webkit-transform:rotateY(0deg);
        -moz-transform:rotateY(0deg);
    }
    .photo-back .photo-wrap{
        -webkit-transform:translate(260px , 0px) rotateY(180deg);
        -moz-transform:translate(260px , 0px) rotateY(180deg);
    }
    .nav{
        width: 26%;
        height: 30px;
        line-height: 30px;
        position: absolute;
        left:37%;
        bottom: 20px;
        z-index: 999;

    }
    .nav .i{
        width: 30px;
        height: 30px;
        margin: 0 3px;
        display: inline-block;
        cursor: pointer;
        background-color: #aaa;
        text-align: center;
        border-radius: 50%;
        -webkit-transform:scale(.48);
        -webkit-transition:all 0.5s;
        -moz-transform:scale(.48);
        -moz-transition:all 0.5s;
    }
    .nav .i:after{
        content: "R";
        font-size: 150%;
        font-family: 'Modern Pictograms';
        display: inline-block;
        line-height: 30px;
        color: #fff;
        text-align: center;
        opacity: 0;
    }
    .nav .i-current{
        -webkit-transform:scale(1);
        -moz-transform:scale(1);

    }
    .nav .i-current:after{
        opacity: 1;
    }
    .nav .i-back{
        -webkit-transform:rotateY(-180deg);
        -moz-transform:rotateY(-180deg);
        background-color: #555;
    }